import React, { useEffect, useState, useRef } from "react";
import {Input, Tabs, Collapse, Button, Row,Space} from 'antd';
import { request } from 'dw-mx-request';
import './style/operationPanel.css';
import LeftPanelComponent from '@/application/LeftPanelComponent';
import classNames from 'classnames';
import {RowFlex} from "dw-mx-flex";

export default function LeftPanel(props) {

    const [appID, setAppID] = useState('');
    const [pageID, setPageID] = useState('');
    const [componentShow, setComponentShow] = useState(true);
    const [searchShow, setSearchShow] = useState(false);
    const [panelShow, setPanelShow] = useState(false);

    useEffect(() => {
        setAppID(props.appid);
        setPageID(props.pageid);
    }, [props.appid, props.pageid]);

    const clickComponentBtn = () => {
        setComponentShow(true);
        setSearchShow(false);
        setPanelShow(false);
    };

    const clickSearchBtn = () => {
        setComponentShow(false);
        setSearchShow(true);
        setPanelShow(false);
    };

    const clickPanelBtn = () => {
        setComponentShow(false);
        setSearchShow(false);
        setPanelShow(true);
    };

    return (
        <div className={classNames('dlc-lp', {
            'dlc-lp-component-show': componentShow,
            'dlc-lp-search-show': searchShow,
            'dlc-lp-panel-show': panelShow,
        })}>
{/*            <Button className={'dlc-lp-btn'} onClick={()=>clickComponentBtn()}>组件</Button>*/}
            <RowFlex>
                <Input style={{marginRight:10}} placeholder={"此处搜索组件"}/>
                <Button className={'dlc-lp-btn'} onClick={()=>clickSearchBtn()}>搜索</Button>
            </RowFlex>
            {/*<Button className={'dlc-lp-btn'} onClick={()=>clickPanelBtn()}>模板</Button>*/}
            <div className={'dlc-lp-component'}>
                <LeftPanelComponent appid={appID} pageid={pageID}/>
            </div>
            {/*<div className={'dlc-lp-search'}>
                搜索
            </div>
            <div className={'dlc-lp-panel'}>
                模板
            </div>*/}
        </div>
    );
}